<!-- src/components/Breadcrumb.vue -->
<template>
  <el-breadcrumb separator="/" class="breadcrumb">
    <transition-group name="breadcrumb" tag="span">
      <el-breadcrumb-item
        v-for="(item, index) in breadcrumbs"
        :key="item.path"
        :to="index === breadcrumbs.length - 1 ? undefined : item.path"
      >
        {{ item.title }}
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'

interface MenuItem {
  path: string
  title: string
  children?: MenuItem[]
}

const route = useRoute()
const userStore = useUserStore()

/* 递归把 route.path 映射成 title */
function findTitle(
  list: MenuItem[],
  path: string,
  parents: { path: string; title: string }[] = []
): { path: string; title: string }[] | null {
  for (const item of list) {
    const current = [...parents, { path: item.path, title: item.title }]
    if (item.path === path) return current
    if (item.children) {
      const res = findTitle(item.children, path, current)
      if (res) return res
    }
  }
  return null
}

/* 响应式面包屑数组 */
const breadcrumbs = computed(() => {
  const list = findTitle(userStore.menuList, route.path) || []
  /* 首页一定在第一位 */
  if (list.length && list[0].path !== '/dashboard') {
    list.unshift({ path: '/dashboard', title: '仪表盘' })
  }
  return list
})
</script>

<style scoped>
/* 面包屑容器 */
.breadcrumb {
  margin-left: 20px;  
  padding: 12px 24px;
  
  
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
  overflow-x: auto;          /* 小屏时可横向滑动 */
}

/* 隐藏滚动条但保留滑动功能 */
.breadcrumb::-webkit-scrollbar {
  display: none;
}
.breadcrumb {
  -ms-overflow-style: none;  /* IE 10+ */
  scrollbar-width: none;     /* Firefox */
}

/* 每一项文字 */
:deep(.el-breadcrumb__item) {
  color: #606266;
}

/* 当前页（最后一项）高亮 */
:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #303133;
  font-weight: 600;
}

/* hover 链接变色 */
:deep(.el-breadcrumb__inner a:hover) {
  color: var(--el-color-primary);
  text-decoration: none;
}

/* 移动端精简显示 */
@media (max-width: 768px) {
  .breadcrumb {
    padding: 8px 12px;
    font-size: 13px;
  }
}
</style>